<template>
  <div class="appBox">
    <div class="appmsg">
      <div class="appmsg_item">
        <div class="appmsg_item_title">
          <span class="red">*</span>填写网址：
        </div>
        <div class="appmsg_item_input">
          <input type="text" v-model="app_web" placeholder="请填写移动端网址，默认以http://开头" />
        </div>
      </div>
      <div class="appmsg_item">
        <div class="appmsg_item_title">
          <span class="red">*</span>填写名称：
        </div>
        <div class="appmsg_item_input">
          <input type="text" v-model="app_name" placeholder="请填写应用名称" />
        </div>
      </div>
    </div>
    <div class="appstar">
      <div class="appstar_item">
        <div class="appstar_item_title">
          <span class="red">*</span>启动屏倒计时设置：
        </div>
        <div class="appstar_item_input">
          <input type="number" min="0" max="10" v-model="app_time" placeholder="0-10秒以内，为零则没有倒计时" />
        </div>
      </div>
      <div class="appstar_item">
        <div class="appstar_item_title">
          <span class="red">*</span>启动图裁剪选项：
        </div>
        <div class="appstar_item_input">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="tips">
        <div class="tips_title">注意：</div>
        <div class="tips_msg">
          <div>1.由于手机屏幕高宽比杂乱不统一，请启用裁剪以确保不会变形。</div>
          <div style="margin-top:10px;">
            2.强烈建议：按右侧图中所示的规格制作启动图，以保证展示效果。
          </div>
        </div>
      </div>
      <div class="upAppIcon">
        <div><span class="red">* </span> 上传应用图标和启动图：</div>
        <div class="uploadIconBox">
          <cosupload :type="'1'" :module="'images/appicon'" :beforeupload="beforeupload" :change="uploadImgChangeOne"
            :success="uploadImgSuccessOne">
            <div>
              <img v-if="zxlogo" class="iconSize_tow" :src="zxlogo" alt="" />
              <img v-else class="iconSize_tow" src="../../../../static/packApp/editApp/editMyApp/upIcon2.png" alt="" />
            </div>
          </cosupload>
          <cosupload :type="'1'" :module="'images/appicon'" :beforeupload="beforeupload" :change="uploadImgChangeTow"
            :success="uploadImgSuccessTow">
            <div>
              <img v-if="bgimg" class="iconSize_one" :src="bgimg" alt="" />
              <img v-else class="iconSize_one" src="../../../../static/packApp/editApp/editMyApp/upIcon1.png" alt="" />
            </div>
          </cosupload>
          <cosupload>
            <div>
              <img class="iconSize_three" src="../../../../static/packApp/editApp/editMyApp/upIcon3.png" alt="" />
            </div>
          </cosupload>
          <cosupload>
            <div>
              <img class="iconSize_four" src="../../../../static/packApp/editApp/editMyApp/upIcon4.png" alt="" />
            </div>
          </cosupload>
        </div>
      </div>
    </div>
    <!-- <div class="buy">
      <div>
        <div class="buyCheck">
          <div><span class="red">*</span>当前应用正式版购买信息：</div>
          <el-checkbox v-model="checked"
            >安卓版<span class="red">(38元)</span
            ><span>(已购)</span></el-checkbox
          >
          <el-checkbox v-model="checked"
            >苹果版<span class="red">(108元)</span
            ><span>(未购买，可再次购买，请选择支付方式)</span></el-checkbox
          >
        </div>
        <div class="pay">
          <button class="WeChat_btn">
            <img
              src="../../../../static/packApp/editApp/editMyApp/WeChat.png"
              alt=""
            />微信支付
          </button>
          <button class="Alipay_btn">
            <img
              src="../../../../static/packApp/editApp/editMyApp/Alipay.png"
              alt=""
            />支付宝支付
          </button>
        </div>
      </div>
    </div> -->
    <div class="save_btn">
      <button class="over" @click="submitAppMsg">保存编辑</button>
    </div>
  </div>
</template>
<script>
  import cosupload from "../../common/COSUpload";
  export default {
    components: {
      cosupload
    },
    // props:["appid"],
    data() {
      return {
        appid: "",
        appMsg: {}, //应用信息
        zxlogo: "", //应用图标
        zxlogoSign: '', //加密的应用图标
        newzxlogo: "", //提交应用图标时阿里云的链接
        bgimg: "", //启动图
        bgimgSign: '', //加密的启动图
        newbgimg: "", //提交启动图时阿里云的链接
        img_ipa: "",
        new_img_ipa: "",
        img_phoneX: "",
        new_img_phoneX: "",
        app_web: "", //填写网址
        app_name: "", //填写名称
        app_time: "3", //启动屏倒计时设置
        options: [{
            value: "1",
            label: "不裁剪（拉伸铺满屏幕）"
          },
          {
            value: "2",
            label: "上对齐：裁剪下边沿或左右边沿"
          },
          {
            value: "3",
            label: "下对齐：裁剪上边沿或左右边沿"
          },
          {
            value: "4",
            label: "中对齐：裁剪上下边沿或左右边沿"
          },
          {
            value: "5",
            label: "左对齐：裁剪上下边沿或右边沿"
          },
          {
            value: "6",
            label: "右对齐：裁剪上下边沿或左边沿"
          }
        ],
        value: "1" //启动图裁剪选项：
      };
    },
    methods: {
      getAppMsg() {
        this.appid = localStorage.getItem("appid");
        console.log(this.appid);
        var params = new URLSearchParams();
        params.append("appId", this.appid);
        this.$post(this.API.appDetailInfo, params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.appMsg = res.data;
            this.app_web = this.appMsg.web;
            this.app_name = this.appMsg.nickname;
            this.app_time = this.appMsg.lastTime;
            this.value = this.appMsg.cutType + "";
            this.zxlogoSign = this.appMsg.zxlogoSign;
            this.zxlogo = this.appMsg.zxlogo;
            this.bgimgSign = this.appMsg.bgimgSign;
            this.bgimg = this.appMsg.bgimg;
          }
        });
      },
      beforeupload(file) {
        console.log(file);
        const isJPG = file.raw.type === "image/jpeg";
        const isPNG = file.raw.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 1;
        if (!isJPG && !isPNG) {
          this.$message.error("上传头像图片只能是 JPG  PNG 格式!");
          return false;
        }
        // 如果该文件大于1M 则返回
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过1M!");
          return false;
        }
        console.log(isJPG);
        console.log(isPNG);
        console.log(isLt2M);
        return isJPG || (isPNG && isLt2M);
      },
      uploadImgChangeOne(res) {
        this.zxlogoSign = window.URL.createObjectURL(res.raw);
        this.zxlogo = window.URL.createObjectURL(res.raw);
      },
      uploadImgSuccessOne(res) {
        this.zxlogoSign = res;
        this.zxlogo = res;
      },
      uploadImgChangeTow(res) {
        this.bgimgSign = window.URL.createObjectURL(res.raw);
        this.bgimg = window.URL.createObjectURL(res.raw);
      },
      uploadImgSuccessTow(res) {
        this.bgimgSign = res;
        this.bgimg = res;
      },
      submitAppMsg() {
        let that = this;
        var params = new URLSearchParams();
        params.append("appId", that.appid);
        if (that.app_web.trim().length < 5) {
          that.$message({
            type: "error",
            message: "请填写正确的网址"
          });
          return;
        } else {
          params.append("web", that.app_web);
        }
        if (that.app_name.trim().length < 1) {} else {
          params.append("nickname", that.app_name);
        }
        if (that.zxlogo != '') {
          params.append("zxlogo", that.zxlogo);
        } else {
          that.$message({
            type: "error",
            message: "请上传应用图标"
          });
          return;
        }
        if (that.bgimg != '') {
          params.append("bgimg", that.bgimg);
        } else {
          that.$message({
            type: "error",
            message: "请上传启动图"
          });
          return;
        }
        params.append("cutType", that.value);
        params.append("lastTime", that.app_time);
        that.$post(that.API.saveAppDetailInfo, params).then(res => {
          console.log(res);
          if (res.code === 1) {
            sessionStorage.setItem("editAPP", 1);
            that.$router.push({
              path: "/createMyApp"
            })
            this.$root.$emit("reLoaldting", 1)

          }
        });
      }
    },
    created() {
      console.log(localStorage.getItem("appid"));
      this.getAppMsg();
    }
  };

</script>

<style scoped>
  input {
    height: 36px;
    /* background-color: #ffffff; */
    border-radius: 4px;
    border: 1px solid #e4e7ec;
    padding-left: 11px;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .red {
    color: #ff3b3b;
    margin-right: 5px;
  }

  input:focus {
    outline: 0;
  }

  .appBox {
    width: 100%;
    padding: 30px;
    background-color: #0f0f0f;
  }

  .appmsg,
  .appstar {
    width: 100%;
    height: auto;
  }

  .appmsg_item,
  .appstar_item {
    width: 100%;
    display: flex;
    align-items: center;
    height: auto;
    margin-bottom: 20px;
  }

  .appmsg_item_title {
    width: 85px;
    color: #fff;
  }

  .appmsg_item_input,
  .appstar_item_input {
    flex: 1;
  }

  .appmsg_item_input input {
    width: 100%;
    max-width: 500px;
    background-color: #0f0f0f;
    color: #fff;
  }

  .appstar,
  .upAppIcon {
    margin-top: 30px;
  }

  .appstar_item_title {
    width: 140px;
    color: #fff;
  }

  .appstar_item_input {
    flex: 1;
  }

  .appstar_item_input>>>.el-select .el-input.is-focus .el-input__inner {
    border-color: #ff7926;
  }

  .appstar_item_input>>>.el-input__inner {
    background-color: #0f0f0f;
    color: #fff;
  }


  .appstar_item_input input {
    width: 100%;
    max-width: 445px;
    background-color: #0f0f0f;
    color: #fff;
  }

  .el-select {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 445px;
  }

  .tips {
    width: 100%;
    height: auto;
    padding: 23px 12px;
    border-radius: 4px;
    border: 1px solid #fb5747;
    display: flex;
    color: #fb5747;
  }

  .tips_title {
    width: 45px;
  }

  .tips_msg {
    flex: 1;
  }

  .uploadIconBox {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 15px 0;
  }

  .uploadIconBox>>>.el-upload-dragger {
    background-color: #0f0f0f;
  }

  .iconSize_one {
    width: 136px;
    height: 240px;
  }

  .iconSize_tow {
    width: 136px;
    height: 136px;
  }

  .iconSize_three {
    width: 190px;
    height: 142px;
  }

  .iconSize_four {
    width: 136px;
    height: 295px;
  }

  div>>>input[type="file"] {
    display: none;
  }

  .buy {
    margin-top: 20px;
  }

  .pay {
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;
  }

  .WeChat_btn {
    width: 120px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #00b700;
    background-color: #fff;
    margin-right: 22px;
  }

  button img {
    width: 20px;
    height: 20px;
  }

  button:focus {
    outline: 0;
  }

  .Alipay_btn {
    width: 162px;
    height: 36px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #1d5fff;
  }

  .save_btn {
    width: 100%;
    height: auto;
    padding: 8px 0;
    background-color: #0f0f0f;
  }

  .over {
    width: 100px;
    height: 36px;
    background-color: #ff7926;
    border-radius: 4px;
    border: 0;
    color: #fff;
    margin-left: 38px;
  }

</style>
